<template>
  <div>
    {{ viewdata.title }}
  </div>

  <!-- 查询表单 -->
  <div>
    <ElForm :inline="true">
      <ElFormItem>
        <ElButton type="success" @click="showDeptSelector(1)">
          {{ viewdata.queryDept.deptName }}
        </ElButton>
      </ElFormItem>

      <ElFormItem>
        <ElInput v-model="viewdata.queryInfo.employeeName" placeholder="姓名模糊查询"></ElInput>
      </ElFormItem>

      <ElFormItem>
        <ElInput v-model="viewdata.queryInfo.phone" placeholder="手机号模糊查询"></ElInput>
      </ElFormItem>

      <ElFormItem>
        <ElSelect v-model="viewdata.queryInfo.orderBy">
          <ElOption v-for="d in viewdata.orderByList" :value="d.value" :label="d.title"></ElOption>
        </ElSelect>
      </ElFormItem>

      <ElFormItem>
        <ElButton type="primary" @click="query">查询</ElButton>
        <ElButton type="success" @click="showAddDialog">添加</ElButton>
      </ElFormItem>
    </ElForm>
  </div>

  <!-- 数据呈现的部分 -->
  <div>
    <ElTable :data="viewdata.list">
      <ElTableColumn prop="employeeName" label="姓名"></ElTableColumn>
      <ElTableColumn prop="phone" label="手机号"></ElTableColumn>
      <ElTableColumn prop="dept.deptName" label="所属部门"></ElTableColumn>
      <ElTableColumn label="信息最后修改时间">
        <template #default="s">
          {{ Tools.formatDate(s.row.lastupdate) }}
        </template>
      </ElTableColumn>

      <ElTableColumn label="操作">
        <template #default="s">
          <ElButton type="success" @click="showModifyDialog(s.row)">修改</ElButton>
          <ElButton type="danger" @click="del(s.row)">删除</ElButton>
        </template>
      </ElTableColumn>
    </ElTable>

    <PageComp :page="viewdata.page" @page-change="query"></PageComp>
  </div>

  <!-- 部门选择对话框 -->
  <ElDialog title="部门选择" v-model="viewdata.dvisible">
    <div>
      <DeptSelector @selected="selectedDept"></DeptSelector>
    </div>
  </ElDialog>

  <!-- 添加的对话框 -->
  <el-dialog @close="query" title="添加员工" v-model="viewdata.avisible">
    <div>
      <ElForm>
        <ElFormItem>
          <ElButton @click="showDeptSelector(2)">{{ viewdata.addDept.deptName }}</ElButton>
        </ElFormItem>

        <ElFormItem>
          <ElInput v-model="viewdata.addInfo.employeeName" placeholder="姓名"></ElInput>
        </ElFormItem>

        <ElFormItem>
          <ElInput v-model="viewdata.addInfo.phone" placeholder="手机号"></ElInput>
        </ElFormItem>
      </ElForm>
    </div>

    <template #footer>
      <div>
        <ElButton @click="add">添加</ElButton>
      </div>
    </template>
  </el-dialog>

  <!-- 修改的对话框 -->
  <el-dialog @close="query" title="修改员工" v-model="viewdata.mvisible">
    <div>
      <ElForm>
        <ElFormItem>
          <ElButton @click="showDeptSelector(3)">{{ viewdata.modifyDept.deptName }}</ElButton>
        </ElFormItem>

        <ElFormItem>
          <ElInput v-model="viewdata.modifyInfo.employeeName" placeholder="姓名"></ElInput>
        </ElFormItem>

        <ElFormItem>
          <ElInput v-model="viewdata.modifyInfo.phone" placeholder="手机号"></ElInput>
        </ElFormItem>
      </ElForm>
    </div>

    <template #footer>
      <div>
        <ElButton @click="modify">保存</ElButton>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import { Tools } from '../../ts/Tools'
import { BaseListResult, BaseResult, PageInfo } from '../../ts/BaseResult'
import { ApiService } from '../../ts/ApiService'
import { Dept, Employee } from '../../ts/Manage'
import { ElButton, ElDialog, ElForm, ElFormItem, ElInput, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
import PageComp from '../../components/PageComp.vue'
import DeptSelector from '../../components/DeptSelector.vue'

const viewdata = reactive({
  title: '员工管理',
  page: new PageInfo(),
  list: new Array<Employee>(),
  queryInfo: {
    deptId: -1,
    employeeName: '',
    orderBy: 2,
    phone: '',
  },
  orderByList: [
    { value: 1, title: '按照编号升序' },
    { value: 2, title: '按照编号降序' },
    { value: 3, title: '按照部门名称升序' },
    { value: 4, title: '按照部门名称降序' },
    { value: 5, title: '分部门按照姓名排序' },
  ],
  // 部门选择的部分
  queryDept: new Dept(),
  dvisible: false,
  // 选择的模式控制，1：查询部门选择模式,2：添加部门的选择模式,3：修改部门的选择模式
  dmode: 1,
  // 添加的部分
  addDept: new Dept(),
  avisible: false,
  addInfo: new Employee(),
  // 修改的部分
  modifyDept: new Dept(),
  mvisible: false,
  modifyInfo: new Employee(),
})

viewdata.queryDept.deptName = '请选择部门'

// 删除的部分
function del(info: Employee) {
  ElMessageBox.confirm(`是否删除${info.dept?.deptName}的${info.employeeName}？`, '删除员工！')
    .then(() => {
      ApiService.post(
        '/manage/employee/delete',
        {
          employeeId: info.employeeId,
        },
        (data: BaseResult) => {
          if (data.success) {
            ElMessageBox.alert(data.message)
          }
          query()
        },
      )
    })
    .catch(() => {})
}

// 修改的部分
function showModifyDialog(info: Employee) {
  info = Tools.concatJson(info)
  viewdata.modifyInfo = info
  viewdata.modifyDept = info.dept
  viewdata.mvisible = true
}

function modify() {
  // 显示的数据带有dept视图才需要的数据，所以最好是删除掉
  delete viewdata.modifyInfo.dept
  ApiService.post('/manage/employee/update', viewdata.modifyInfo, (data: BaseResult) => {
    if (data.success) {
      ElMessageBox.alert(data.message)
    }
  })
}

// 添加的部分
function showAddDialog() {
  viewdata.addInfo = new Employee()
  viewdata.addDept.deptName = '请选择部门'
  viewdata.avisible = true
}

function add() {
  ApiService.post('/manage/employee/add', viewdata.addInfo, (data: BaseResult) => {
    if (data.success) {
      ElMessageBox.alert(data.message)
      viewdata.addInfo.employeeName = ''
      viewdata.addInfo.phone = ''
    }
  })
}

// 打开部门选择对话框
function showDeptSelector(mode: number) {
  // 记录打开模式
  viewdata.dmode = mode
  viewdata.dvisible = true
}

// 选择部门之后的回调
function selectedDept(info: Dept) {
  if (viewdata.dmode == 1) {
    viewdata.queryDept = info
    viewdata.queryInfo.deptId = info.deptId
  } else if (viewdata.dmode == 2) {
    viewdata.addDept = info
    viewdata.addInfo.deptId = info.deptId
  } else if (viewdata.dmode == 3) {
    viewdata.modifyDept = info
    viewdata.modifyInfo.deptId = info.deptId
  }
  viewdata.dvisible = false
}

function query() {
  ApiService.post('/manage/employee/queryAll', Tools.concatJson(viewdata.page, viewdata.queryInfo), (data: BaseListResult<Employee>) => {
    if (data.success) {
      viewdata.list = data.list
      viewdata.page = data.page
    }
  })
}

query()
</script>
<style></style>
